<template>
  <view class="pages">
    <view class="two">
      <view class="tops">
        <view class="top">
          <view class="left">
            <image
              src="../../static/images/supermarket/头像.png"
              mode="scaleToFill"
            />
            <view class="name">红月亮超市</view>
          </view>
          <view class="right">
            <view
              class="love"
              :class="{ followed: isFollowed }"
              @click="toggleFollow"
            >
              {{ isFollowed ? "已关注" : "+关注" }}
            </view>
            <view class="share" @click="open">分享商品</view>
            <uni-popup
              class="popup"
              ref="popup"
              type="center"
              :style="{ 'border-radius': '5px' }"
            >
              <view
                class="pops"
                style="
                  width: 630rpx;
                  height: 1000rpx;
                  background-image: url(../../static/images/supermarket/bgs.png);
                  background-size: cover;
                  border-radius: 5px;
                "
              >
                <view class="peo">
                  <image
                    src="../../static/images/supermarket/头像.png"
                    mode="scaleToFill"
                  />
                  <view class="prdt">
                    <p>黄橙橙</p>
                    <text>向日葵客厅电视柜装饰</text>
                  </view>
                </view>
                <view class="bigimg">
                  <image
                    src="../../static/images/supermarket/头像.png"
                    mode="scaleToFill"
                  />
                </view>
                <view class="bots">
                  <view class="bot">
                    <text
                      >真花摆设向日葵客厅电视柜装饰摆件玄关桌面餐桌花摆花
                    </text>
                    <view class="twos">
                      <view class="lfs">
                        <text>￥ <span>19.9</span></text>
                        <p>长按识别或扫，扫描二维码</p>
                      </view>
                      <view class="rigs">二维码</view>
                    </view>
                  </view>
                </view>
                <view class="bottons">
                  <view class="btn1">保存海报分享</view>
                  <view class="btn2">复制链接分享</view>
                </view>
              </view>
            </uni-popup>
          </view>
        </view>
      </view>
      <view class="contents">
        <view class="title"
          >真花摆设向日葵客厅电视柜装饰摆件玄关桌面餐桌花摆花
        </view>
        <view class="times">
          <view class="time"
            >活动时间：<span>2024-08-30 12:00</span>后结束
          </view>
        </view>
        <view class="content"
          >向日葵属的一年生草本植物。高1～3.5米。茎直立，圆形多棱角，质硬被白色粗硬毛。广卵形的叶片通常互生先端锐突或渐尖，有基出3脉，边缘具粗锯齿，两面粗糙，被毛，有长柄。头状花序</view
        >
      </view>
    </view>

    <view class="pictures">
      <view class="imgs">
        <view class="showimg">
          <image
            src="../../static/images/supermarket/show.png"
            mode="scaleToFill"
          />
        </view>
        <view class="unshowimg" v-if="isExpanded">
          <image
            src="../../static/images/supermarket/show1.png"
            mode="scaleToFill"
          />
        </view>
        <view
          class="showtext"
          :class="{ expanded: isExpanded }"
          @click="toggleExpand"
        >
          {{ isExpanded ? "收起详情" : "展开全部详情" }}
        </view>
      </view>
    </view>
    <view class="products">
      <view class="names">团购商品</view>
      <view class="product">
        <image
          src="../../static/images/supermarket/头像.png"
          mode="scaleToFill"
        />
        <view class="compute">
          <view class="tits"
            >真花摆设向日葵客厅电视柜装饰摆件 玄关桌面餐桌花摆花
          </view>
          <view class="info">已团<span>451</span>人</view>
          <view class="buy">
            <view class="prc">￥<span>19.9</span></view>
            <view class="coms"
              ><uv-number-box
                v-model="value"
                @change="valChange"
              ></uv-number-box
            ></view>
          </view>
        </view>
      </view>
    </view>
    <view class="history">
      <view class="tit">跟团记录</view>
      <view class="infos" v-for="item in 5" :key="item">
        <view class="nums">120</view>
        <view class="people">
          <view class="tou">
            <image
              src="../../static/images/supermarket/头像.png"
              mode="scaleToFill"
            />
          </view>
          <view class="orders">
            <view class="order">
              <view class="nameX">张丹丹</view>
              <view class="dates">04-25 <span>07:27</span></view>
            </view>
            <view class="what"
              >真花摆设向日葵客厅电视柜装饰摆件真花摆设向日葵客厅电视柜装饰摆件
            </view>
          </view>
        </view>
        <view class="how">+1</view>
      </view>
      <view class="follow">点击展开更多接龙记录</view>
    </view>
    <view class="bottom">
      <view class="left">
        <uv-icon name="file-text" color="#999999" size="28"></uv-icon>
        <text>订单中心</text>
      </view>
      <view class="midlle">应付金额 <text>￥</text> <span>19.9</span> </view>
      <view class="kacha">
        <image
          src="../../static/images/supermarket/shand@2x.png"
          mode="scaleToFill"
        />
      </view>
      <view class="last">我要接龙</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFollowed: false, // 初始状态为未关注
      isExpanded: !this.isFollowed, // 如果未关注，则默认展开
      value: 0,
    };
  },
  methods: {
    toggleFollow() {
      this.isFollowed = !this.isFollowed;
      this.isExpanded = !this.isFollowed;
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    },
    valChange(e) {
      console.log("当前值为: " + e.value);
    },
    open() {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open();
    },
  },
};
</script>

<style lang='scss' scoped>
.pages {
  height: 300vh;
  background: #f6f6f6;
  .two {
    background: #ffffff;
    padding: 30rpx 35rpx;
    .tops {
      background: #f6f6f6;
      border-radius: 15rpx;
      padding: 20rpx 25rpx;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          justify-content: space-between;
          image {
            width: 100rpx;
            height: 100rpx;
            border-radius: 15rpx;
          }
          .name {
            font-size: 34rpx;
            color: #121212;
            margin-left: 25rpx;
            font-weight: 500;
          }
        }
        .right {
          .love {
            width: 124rpx;
            height: 48rpx;
            line-height: 48rpx;
            background: #e60013;
            border-radius: 10rpx;
            font-size: 26rpx;
            color: #ffffff;
            text-align: center;
            font-weight: 500;
            margin-bottom: 10rpx;
            transition: all 0.3s ease; // 添加过渡效果
          }
          .followed {
            background: #ffffff;
            border: 1px solid #e60013;
            color: #e60013;
          }
          .share {
            width: 124rpx;
            height: 50rpx;
            line-height: 50rpx;
            border: 1px solid #e60013;
            border-radius: 10rpx;
            font-size: 26rpx;
            color: #e60013;
            text-align: center;
          }
          .popup {
            .pops {
              padding: 30rpx;
              .peo {
                display: flex;
                align-items: center;
                margin-bottom: 20rpx;
                image {
                  width: 100rpx;
                  height: 100rpx;
                  border-radius: 50%;
                  margin-right: 20rpx;
                }
                .prdt {
                  p {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #333333;
                  }
                  text {
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #888888;
                  }
                }
              }
              .bigimg {
                width: 100%;
                height: 500rpx;
                margin-bottom: 20rpx;
                image {
                  width: 100%;
                  height: 100%;
                  border-radius: 10rpx;
                }
              }
              .bots {
                .bot {
                  text {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #333333;
                  }
                  .twos {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 15rpx 0;
                    .lfs {
                      text {
                        font-weight: bold;
                        font-size: 28rpx;
                        color: #e60013;
                        span {
                          font-size: 36rpx;
                        }
                      }
                      p {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #888888;
                        margin: 15rpx 0;
                      }
                    }
                  }
                }
              }
              .bottons {
                display: flex;
                justify-content: space-around;
                align-items: center;
                .btn1 {
                  width: 260rpx;
                  height: 80rpx;
                  line-height: 80rpx;
                  background: #221815;
                  border-radius: 10rpx;
                  font-weight: bold;
                  font-size: 32rpx;
                  color: #ffffff;
                  text-align: center;
                }
                .btn2 {
                  width: 260rpx;
                  height: 80rpx;
                  line-height: 80rpx;
                  background: #f23030;
                  border-radius: 10rpx;
                  font-weight: bold;
                  font-size: 32rpx;
                  color: #ffffff;
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }
    .contents {
      margin: 25rpx 0;
      .title {
        font-weight: bold;
        font-size: 34rpx;
        color: #333333;
        margin-bottom: 15rpx;
      }
      .times {
        font-weight: 400;
        font-size: 22rpx;
        color: #e60013;
        margin-bottom: 25rpx;
      }
      .content {
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
      }
    }
  }
  .pictures {
    padding: 0 35rpx 0 35rpx;
    background: #ffffff;
    margin-bottom: 35rpx;
    .imgs {
      position: relative;
      .showimg {
        width: 100%;
        height: 850rpx;
        margin-bottom: 22rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .unshowimg {
        width: 100%;
        height: 500rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .showtext {
        text-align: center;
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: #ffffff;
        background: #333;
        opacity: 0.75;
        position: absolute;
        left: 0;
        bottom: 0;
        transition: all 0.3s ease; // 添加过渡效果
        &.expanded {
          bottom: auto;
          top: calc(100% - 100rpx);
        }
      }
    }
  }
  .products {
    background: #ffffff;
    padding: 30rpx 35rpx;
    .names {
      font-weight: 400;
      font-size: 32rpx;
      color: #333333;
      padding-bottom: 35rpx;
    }
    .product {
      display: flex;
      image {
        width: 370rpx;
        height: 210rpx;
        border-radius: 15rpx;
        margin-right: 30rpx;
      }
      .compute {
        .tits {
          font-weight: bold;
          font-size: 32rpx;
          color: #121212;
        }
        .info {
          font-weight: 400;
          font-size: 28rpx;
          color: #888888;
          margin: 12rpx 0 30rpx 0;
        }
        .buy {
          display: flex;
          justify-content: space-between;
          .prc {
            font-weight: bold;
            font-size: 26rpx;
            color: #e60013;
            span {
              font-size: 32rpx;
            }
          }
        }
      }
    }
  }
  .history {
    background: #ffffff;
    margin-top: 30rpx;
    padding: 30rpx 35rpx;
    .tit {
      font-weight: 400;
      font-size: 32rpx;
      color: #333333;
      padding-bottom: 35rpx;
    }
    .infos {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      .nums {
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
      }
      .people {
        display: flex;
        .tou {
          image {
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
            margin: 0 20rpx;
          }
        }
        .orders {
          .order {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12rpx;
            .nameX {
              font-weight: 400;
              font-size: 28rpx;
              color: #888888;
            }
            .dates {
              font-weight: 500;
              font-size: 28rpx;
              color: #888888;
              span {
                margin-left: 10rpx;
              }
            }
          }
          .what {
            font-weight: 400;
            font-size: 30rpx;
            color: #333333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
        }
      }
      .how {
        font-weight: 500;
        font-size: 30rpx;
        color: #e60013;
        margin: 46rpx 0 0 10rpx;
      }
    }
    .follow {
      text-align: center;
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
    }
  }
  .bottom {
    position: relative;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120rpx;
    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-weight: 400;
      font-size: 26rpx;
      color: #333333;
      flex: 1;
      padding: 0 40rpx 0 40rpx;
    }
    .midlle {
      background: #221815;
      color: #ffffff;
      line-height: 120rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      flex: 3;
      padding-left: 30rpx;
      text {
        margin: 0 10rpx;
        font-weight: bold;
        font-size: 32rpx;
        color: #ffffff;
      }
      span {
        font-weight: bold;
        font-size: 32rpx;
        color: #ffffff;
      }
    }
    .kacha {
      //定位在中间
      position: absolute;
      top: 50%;
      left: 72%;
      transform: translate(-50%, -50%);
      z-index: 999;
      width: 40rpx;
      height: 120rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .last {
      background: #e60013;
      font-weight: bold;
      font-size: 34rpx;
      color: #ffffff;
      line-height: 120rpx;
      flex: 2;
      text-align: center;
    }
  }
}
</style>